<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-input
        v-model="name"
        placeholder="请输入页面名字..."
      ></el-input>
      <el-button
        type="primary"
        size="small"
        icon="el-icon-edit"
        @click="onSave"
      >保存</el-button>
    </div>

    <div>
      <v-jsoneditor
        v-model="json"
        :options="options"
        height="400px"
        @error="onError"
        @click="handleClick"
      ></v-jsoneditor>
    </div>
    <div>
      <el-button
        type="primary"
        size="small"
        icon="el-icon-edit"
        @click="onQuery"
      >查询</el-button>
    </div>
    </br>
    列配置:
    <div>
      <el-row v-for="value in headerMap" :key="value['path']">
        <el-col :span="5">
          <el-input v-model="value.path" disabled></el-input>
        </el-col>
        <el-col :span="10">
            <el-input v-model="value.displayName" placeholder="输入列名"></el-input>
        </el-col>
        <el-col :span="2">
          <el-input v-model="value.order" placeholder="排序" type="number">
          </el-input>
        </el-col>
          <el-col :span="4">
          <el-checkbox v-model="value.visible" label="是否可见">
          </el-checkbox>
        </el-col>
      </el-row>
    </div>
    <el-button
      type="warning"
      @click="exportExcel('#anchorListFirst', name)"
    >导出</el-button>
    <div class="cs-filter-result">
      <el-table
        id="anchorListFirst"
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 300px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column
          v-for="column in headers"
          :key="column.path"
          align="center"
          :label="column.displayName == column.path ? column.path : column.displayName"
        >
          <template slot-scope="{row}">
            <span>{{ row[column.path] | prettyContent }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { rawQuery, saveView, getView } from '@/api/es'
import VJsoneditor from 'v-jsoneditor'

export default {
  name: 'EsDevTool',
  components: {
    VJsoneditor
  },
  filters: {
    prettyContent(content) {
      if (!content) {
        return content
      }
      if (!content.match(/^[0-9.]+$/)) {
        return content
      }
      const parsedF = Number.parseFloat(content)
      if (parsedF) {
        const parsedInt = Number.parseInt(content)
        if (parsedF > parsedInt) {
          return parsedF.toFixed(2)
        } else {
          return parsedInt
        }
      }
      return content
    }
  },
  data() {
    return {
      list: [],
      headers: [],
      name: '',
      id: '',
      headerMap: {
      },
      listLoading: false,
      json: {},
      options: {
        mode: 'code'
      }
    }
  },
  mounted(){
    this.doSearch()
  },
  methods: {
    doSearch() {
      if (this.$route.query && this.$route.query.id) {
          getView(this.$route.query.id).then(resp => {
            console.log(resp)
            this.id = resp.data.id
            this.headers = resp.data.fields
            this.headerMap = {}
            this.headers.forEach(item => {
              this.headerMap[item.path] = item
            })
            this.json = resp.data.requestBody
            this.name = resp.data.name
          })
      }
    },
    onQuery() {
      this.listLoading = true
      rawQuery(this.json).then((resp) => {
        const headers = resp.data.headers
        headers.forEach(header => {
          if (!this.headerMap[header]) {
            this.headerMap[header] = {
              displayName: header,
              path: header,
              visible: true,
              order: 0
            }
          }
        })
        for (const path in this.headerMap) {
          if (!headers.includes(path)) {
            delete this.headerMap[path]
          }
        }
        const resultHeaders = []
        for (const obj in this.headerMap) {
          resultHeaders.push(this.headerMap[obj])
        }
        this.headers = resultHeaders
        this.list = resp.data.rows
        this.listLoading = false
      })
    },

    onSave() {
      const fields = this.headers
      const requestBody = this.json
      const requestObj = {
        fields: fields,
        requestBody: requestBody,
        name: this.name,
        desc: this.name,
        id: this.id
      }
      if (!requestBody) {
        this.$message.error('需要输入查询结构体')
        return
      }
      if (!this.name) {
        this.$message.error('输入一个名字')
        return
      }
      saveView(requestObj).then(resp => {
        this.$message.success('保存成功')
        this.id = resp.data
      })

    },

    handleClick(e) {
      console.log('on json editor click:', e)
    },
    onError(e) {}
  }
}
</script>

<style scoped>
</style>
